<template>
	<view class="zone">

		<Header title=" " color="#fff"></Header>
		<view class="posabtn button" @click="showinfo = true">设置社交资料</view>
		<view class="main">
			<view class="box" :style="style">
				<!-- tab部分 -->
				<view class="tab">
					<view v-for="item in tablist" :key="item.id" :class="[stat == item.id?'tabactive':'']"
					@click="tabchange(item.id)">
						<image :src="`http://img.cpgm.cc/panda/static/index/${item.id == stat?item.select:item.selected}`" mode="widthFix" />
					</view>
				</view>
				<!-- 内容列表 -->
				<scroll-view scroll-y class="content" >
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="flex">
							<view class="lv" >
								<image v-if=" index < 3" :src="index == 0?'http://img.cpgm.cc/panda/static/public/one.png':index == 1?'http://img.cpgm.cc/panda/static/public/two.png':'http://img.cpgm.cc/panda/static/public/three.png'" mode="widthFix" />
								<text v-else>{{index+1}}</text>
							</view>
							<view class="header">
								<image   :src="item.wx_img? item.wx_img :'http://img.cpgm.cc/panda/static/login/logo.png'" mode="" />
							</view>
							<text class="phone">{{!!item.wx_nickname?item.wx_nickname:'潮玩新人'}}</text>
						</view>
						
						<view class="right">
							<view class="r_box" v-show="stat == 1">
								<view class="dd">
									<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
									<text>{{item.crystal>10000?'10000+':item.crystal}}</text>
								</view>
								<view class="button"  @click="linkwold(item)">联系ta</view>
							</view>
							<view class="r_box" v-show="stat == 2">
								<view  class="dd">
									<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
									<text>{{item.silver>10000?'10000+':item.silver}}</text>
								</view>
								<view class="button"  @click="linkwold(item)">联系ta</view>
							</view>
						</view>
					</view>

					<view class="empty" v-if="datalist[stat]==''">
						<image src="http://img.cpgm.cc/panda/static/public/empty.png" mode="widthFix" />
						<text>数据为空</text>
					</view>
				</scroll-view>
			</view>
		</view>


		<u-mask :show="show4">
			<view class="warpss">
				<view class="top_wa">
					<image src="http://img.qxgm.site/xydms/static/feed/cha.png" @click="show4=false" class="chahao"
						mode="widthFix"></image>
					<!-- 上面的头部 -->
					<view class="head_tou">
						联系ta
					</view>
					<!-- //微信号 -->
					<view class="weixin">
						<view class="wxh">
							微信号
						</view>
						<input type="text" class="inp" :disabled="true" v-model="wx" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(wx)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							QQ号
						</view>
						<input type="text" class="inp" :disabled="true" v-model="QQ" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(QQ)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							QQ群
						</view>
						<input type="text" class="inp" :disabled="true" v-model="qqq" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(qqq)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							手机号
						</view>
						<input type="text" class="inp" :disabled="true" v-model="phon" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(phon)">复制</view>
					</view>
				</view>
			</view>
		</u-mask>



		<u-mask :show="showinfo">
			<view class="warpss">
				<view class="top_wa">
					<image src="http://img.cpgm.cc/panda/static/feed/cha.png" @click="showinfo = false" class="chahao"
						mode="widthFix"></image>
					<!-- 上面的头部 -->
					<view class="head_tou"> 联系方式 </view>
					<view class="shuom">
						填写联系方式可让好友快速联系上您<br />
						如涉及隐私谨慎填写或留空白即可~
					</view>
					<!-- //微信号 -->
					<view class="weixin">
						<view class="wxh"> 微信号 </view>
						<input type="text" class="inp" name="" v-model="wx2" placeholder="请输入微信号" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> QQ号 </view>
						<input type="text" class="inp" name="" v-model="QQ2" placeholder="请输入QQ号" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> QQ群 </view>
						<input type="text" class="inp" name="" v-model="qqgroup2" placeholder="请输入QQ群" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> 手机号 </view>
						<input type="text" class="inp" name="" v-model="phon2" placeholder="请输入手机号" id="" />
					</view>
					<!-- 下面的确认按钮 -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="queding" class="btn_que button">
						确定
					</u-button>
				</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
import config from '@/common/config/index'
	export default {
		data() {
			return {
				imgurl:config.imgurl,
				headerimgurl:config.headerimgurl,
				background: {
					backgroundColor: '#0E0E0E',
				},
				showinfo:false,
				stat: 2,//tab状态
				tablist: [{
						id: 2,
						name: '银元排行榜',
						isrequist:false,
						select:'w3.png',
						selected:'w4.png',
					},
					{
						id: 1,
						name: '水晶排行榜',
						isrequist:false,
						select:'w1.png',
						selected:'w2.png',
					},
					
				],//tablist
				list:'',//使用的列表
				datalist:{
					1:[],
					2:[],
					3:[],
				},//用来保存数据
				scleft:0,
				commonlist:{},
				p_userid:'',
				style:{
					background:'url(http://img.cpgm.cc/panda/static/index/left.png) #30857F',
					backgroundSize:'100% 105%'
				},
				imgarr:['','url(http://img.cpgm.cc/panda/static/index/rightbg.png) #30857F','url(http://img.cpgm.cc/panda/static/index/left.png) #30857F'],
				show4:false,
				phon: '',
				QQ: '',
				wx: '',
				qqq:'',
				userinfo: uni.getStorageSync("userinfo"),
				phon2: '',
				QQ2: '',
				wx2: '',
				qqq2:'',
				qqgroup2:'',
			};
		},
		onLoad(){
			this.rankList(2)
			this.initLian(this.userinfo.id);
		},
		onPullDownRefresh() {
			this.rankList(this.stat)
		},
		methods: {
			tabchange(id , index) {
				this.stat = id
				this.style.background = this.imgarr[id]
				// 节流
				if(!this.tablist[id-1].isrequist) {
					this.rankList(id)
				}else {
					// 赋值保存的列表
					this.list = this.datalist[id]
				}
			},
			// 请求排行榜列表
			async rankList(type){
				let res = await this.$http.index.rankList({
					type:type
				})
				if(res.code == 1) {
					this.tablist[type-1].isrequist = true
					this.datalist[type] = res.data
					this.list = this.datalist[type]
				}
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1200);
			},

			// 联系方式
			async initLian(id) {
				let n = await this.$http.index.getInfo({
					id: id,
				});
				if (n.code == 1) {
					this.wx2 = n.data.wx?n.data.wx:'暂未设置';
					this.QQ2 = n.data.qq?n.data.qq:'暂未设置';
					this.qqgroup2 = n.data.qqq?n.data.qqq:'暂未设置';
					this.phon2 = n.data.mobile?n.data.mobile:'暂未设置';
				}
			},

			//点击确认联系方式
			async queding() {
				let n = await this.$http.index.editInfo({
					mobile: this.phon2,
					wx: this.wx2,
					qqq: this.qqgroup2,
					qq: this.QQ2,
				});
				this.$u.toast(n.msg);
				if (n.code == 1) {
					this.showinfo = false;
					this.initLian(this.userinfo.id);
				}
			},

			// 获取大玩家联系方式
			async linkwold(item){
				let n = await this.$http.index.getInfo({
					id: item.id
				})
				if(n.code == 1) {
					this.wx = n.data.wx?n.data.wx:'暂未设置'
					this.QQ = n.data.qq?n.data.qq:'暂未设置'
					this.phon = n.data.mobile?n.data.mobile:'暂未设置'
					this.qqq = n.data.qqq?n.data.qqq:'暂未设置'
					this.show4 = true
				}
			},

			copy(text){
				this.$p.copy(text)
			},
		},
	}
</script>

<style lang="less">
	
	.zone {
		background: #031A31;
		min-height: 100vh;
	}
	.main {
		padding-top: 10px;
	}

	.box {
		height: calc(100vh - 70px);
		box-shadow: 0px 3px 0px 0px rgba(104,104,104,1), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
		border-radius: 10px 10px 0 0;
		padding: 10px;
		background-size: 100% 105% !important;
	}


	.content {
		margin-top: 25px;
		height: calc(100vh - 151px);
		box-sizing: border-box;
		border-radius: 10px;
	}

	.item {
		width: 100%;
		padding: 12px;
		background: rgba(255, 255, 255, 0.81);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
	}

	.flex {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.lv {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;

		image {
			width: 100%;
		}

		text {
			font-size: 20px;
			color: #343434;
			font-weight: 600;
			width: 100%;
			text-align: center;
		}
	}
	.phone {
		flex: 1;
		// width: 110px;
		// white-space: nowrap;/*不允许换行*/
		// overflow: hidden;/*超出隐藏*/
		// text-overflow: ellipsis;/*文本超出三点代替*/
		color: #343434;
		font-size: 13px;
		font-weight: 600;
	}

	.right {
		width: 20%;

		.r_box {
			display: flex;
			flex-direction: column;
		}

		
		.r_box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 85px;
			border-radius: 11px;

			.dd {
				display: flex;
				align-items: center;

				text {
					color: #343434;
					font-size: 12px;
				}
				image {
					width: 20px;
				}
			}

			.button {
				width: 66px;
				height: 28px;
				background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
				background-size: 100% 100%;
				color: #9D3A23;
				font-size: 12px;
			}
		}
	}


	.header {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10px;

			image {
				border-radius: 50%;
				width: 50px;
				height: 50px;

			}
		}


	// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	view {
		width: 50%;
		height: 36px;
		text-align: center;
		line-height: 36px;
		color: rgba(255, 255, 255, 0.51);
		font-size: 22px;
		font-weight: 600;

		image {
			width: 70%;
		}
	}
}

.tabactive {
	color: #00645B !important;
}




// 联系方式


	
	.warpss {

		.top_wa {
			position: relative;
			width: 90%;
			top: 50vh;
			margin: 0 auto;
			transform: translateY(-50%);
			background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
			box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
			border-radius: 15px;
			padding: 20px;
			box-sizing: border-box;

			.chahao {
				width: 30px;
				position: absolute;
				right: 10px;
				top: 10px;
			}

			.btn_que {
				width: 95%;
				height: 57px;
				margin: 0 auto;
				line-height: 57px;
				text-align: center;
				background: url('../../static/public/btn3.png');
				background-size: 100% 100%;
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				color: #9D3A23;
			}

			.head_tou {
				font-size: 18px;
				color: #000;
				text-align: center;
				font-weight: 600;
				margin-bottom: 30px;
			}

			.shuom {
				margin: 20px 0;
				font-size: 12px;
				color: #666;
				text-align: center;
			}
		}
	}

	.copybtn {
		width: 47px;
		height: 28px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 4px;
		color: #9D3A23;
		font-size: 12px;
	}

	.weixin {
		position: relative;
		width: 100%;
		height: 57px;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 10px 0;

		.wxh {
			flex: 1;
			font-size: 13px;
			font-weight: 600;
			color: #343434;
			border-right: 1px solid #e5e5e5;
		}

		.inp {
			flex: 3;
			width: 100%;
			padding: 0 10px;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
		}
	}

	.bot_box {
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		color: #5b5757;
	}

	.copy {
		background: linear-gradient(275deg, #fe4768 0%, #ff867d 100%);
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		width: 50%;
		margin: 0 auto;
		height: 40px;
		margin-top: 20px;
	}

	.http {
		font-size: 14px;
		font-weight: 700;
		color: #ff456c;
		line-height: 23px;
		margin: 10px 0;
	}

	.cha {
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.posabtn {
		width: fit-content;
		height: 40px;
		width: 90px;
		background: url('../../static/public/btn2.png');
		background-size: 100% 100%;
		color: #B73800;
		font-size: 12px;
		font-weight: 600;
		position: absolute;
		top: 10px;
		right: 15px;
		z-index: 998;
	}


</style>
